*{
    margin: 0;
    padding: 0;
}
.box(){
    display: flex;
    display: -we;
    
}

li{list-style: none;}
.px2rem(@name, @px){
    @{name}: @px / 75 * 1rem;
}
.padding01(@top){
    .px2rem(padding-top,@top);
}
.padding02(@bottom){
    .px2rem(padding-bottom,@bottom);
}
.padding03(@left){
    .px2rem(padding-left,@left);
}
.padding04(@right){
    .px2rem(padding-right,@right);
}
header{
   width: 100%;
// .padding03(10);
//  .padding04(10);
       .box();
       align-items: center;
       justify-content: space-between;
      .px2rem(height,98);
      background: #e4366b;
       .px2rem(font-size,40);
       color: #eef0f1;

       
       span{
           display: block;
            
       }
       span:nth-child(1){
           .padding03(10);
           width: 10%;
           img{
               width: 100%;
           }
       }
       span:nth-child(3){
             .padding04(10);
             width: 15%;
             img{
                 width: 100%;
             }
       }
       
}
nav{
    .box();
//  justify-content: center;
    align-items: center;
     .px2rem(height,102);
     background: #333333;
     .px2rem(font-size,35);
     color: #FFFFFF;
     justify-content: space-around;
}
section{
//    .px2rem(padding-bottom,20);
    border-bottom: 2px solid #ccc;
    .box();
//  justify-content: space-around;
    .left{
        width: 30%;
        img{
            width: 100%;
            
            .px2rem(margin,10);
        }
    }
    .right{
          .px2rem(font-size,35);
         .px2rem(margin,10);
           .px2rem(margin-left,40);
            .px2rem(margin-right,30);
        width: 70%;
        .p1{
            .px2rem(margin-bottom,20);
            width: 100%;
            img{
                width: 8%;
                float: right;
            }
        }
        .p4{
            width: 100%;
            img{
//                    .px2rem(margin-top,30);
                width: 10%;
            }
            span{
//                .px2rem(margin-top,-30);
                 .px2rem(margin-left,5);
            .px2rem(margin-right,5);
            .px2rem(padding-bottom,10);
                  .px2rem(height,20);
                    .px2rem(width,60);
                    text-align: center;
                    border: 1px solid #000;
                    display: inline-block;
            }
        }
        .p3{
             .px2rem(margin-bottom,20);
              .px2rem(margin-top,20);
            width: 100%;
            span{
                color: #e5396b;
            }
            img{
                width: 8%;
                float: right;
            }
        }
    }
}
footer {
    .px2rem(height,98);
    background: #000;
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    ul {
        .px2rem(height,98);
        align-items: center; 
        justify-content: space-around;
        .box();
        li {
            .box();
            flex-flow: column;
            align-items: center;
            a {
                display: block;
                color: #FFFFFF;
                .px2rem(font-size,30);
            }
        }
        li:first-child {
            img {
                display: block;
                width: 90%;
            }
        }
    }
}
button{
     .px2rem(height,40);
      .px2rem(width,20);
}
